export function useCompPosition(curComp: TComp) {
  return [
    {
      id: 'Top',
      icon: 'Top',
      click() {
        const PW = getPanelWH(curComp).width
        const CW = getCurCompWH(curComp.id).width
        curComp.style.grid.left = (PW / 2) - (CW / 2)
        curComp.style.grid.top = 0
      }
    },
    {
      id: 'Right',
      icon: 'Right',
      click() {
        const { width: PW, height: PH } = getPanelWH(curComp)
        const { width: CW, height: CH } = getCurCompWH(curComp.id)
        curComp.style.grid.left = PW - CW
        curComp.style.grid.top = (PH / 2) - (CH / 2)
      }
    },
    {
      id: 'Bottom',
      icon: 'Bottom',
      click() {
        const { width: PW, height: PH } = getPanelWH(curComp)
        const { width: CW, height: CH } = getCurCompWH(curComp.id)
        curComp.style.grid.top = PH - CH
        curComp.style.grid.left = (PW / 2) - (CW / 2)
      }
    },
    {
      id: 'Back',
      icon: 'Back',
      click() {
        const PH = getPanelWH(curComp).height
        const CH = getCurCompWH(curComp.id).height
        curComp.style.grid.left = 0
        curComp.style.grid.top = (PH / 2) - (CH / 2)
      }
    },
    {
      id: 'TopLeft',
      icon: 'TopLeft',
      click() {
        curComp.style.grid.left = 0
        curComp.style.grid.top = 0
      }
    },
    {
      id: 'TopRight',
      icon: 'TopRight',
      click() {
        const PW = getPanelWH(curComp).width
        const CW = getCurCompWH(curComp.id).width
        curComp.style.grid.left = PW - CW
        curComp.style.grid.top = 0
      }
    },
    {
      id: 'BottomLeft',
      icon: 'BottomLeft',
      click() {
        const PH = getPanelWH(curComp).height
        const CH = getCurCompWH(curComp.id).height
        curComp.style.grid.top = PH - CH
        curComp.style.grid.left = 0
      }
    },
    {
      id: 'BottomRight',
      icon: 'BottomRight',
      click() {
        const { width: PW, height: PH } = getPanelWH(curComp)
        const { width: CW, height: CH } = getCurCompWH(curComp.id)
        curComp.style.grid.left = PW - CW
        curComp.style.grid.top = PH - CH
      }
    }
  ] as TPositionMenu[]
}

function getCurCompWH(id: string) {
  const curCompDom = document.getElementById(`wft-comp-panel-${id}`)
  if(!curCompDom) return { width: 0, height: 0 }
  const { width, height } = curCompDom?.getBoundingClientRect()
  return { width: Math.floor(width), height: Math.floor(height) }
}

function getPanelWH(curComp: TComp) {
  let panelId = ''
  if(curComp.parentId && curComp.parentKey) {
    if(curComp.parentKey == 'container') panelId = `wft-advanced-container-${curComp.parentId}`
    if(curComp.parentKey == 'form') panelId = `wft-advanced-form-${curComp.parentId}`
    if(curComp.parentKey == 'trellis') panelId = `wft-advanced-trellis-container-${curComp.parentId}`
  } else {
    panelId = 'wft-mobile-container-panel'
  }
  const parentEditContainer = document.getElementById(panelId)
  if(!parentEditContainer) return { width: 0, height: 0 }
  const { width, height } = parentEditContainer?.getBoundingClientRect()
  return { width: Math.floor(width), height: Math.floor(height) }
}